<template>
  <div class="m-pageView">
    <div class="m-searchPanel">
      <div class="layout-1"><span class="leftLine"></span>查询条件</div>
      <div class="layout-2">
        <el-form :model="searchForm" :inline="true">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="角色名称">
                <el-input v-model.trim="searchForm.roleName" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7" class="searchBtns" :offset="11">
              <el-button type="primary" icon="el-icon-search" @click="queryData" :loading="dataListLoading">查询</el-button>
              <el-button type="primary" plain icon="el-icon-refresh" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="m-dataLayout">
      <div class="m-searchListPanel">
        <div class="layout-1"><span class="leftLine"></span>信息列表</div>
        <div class="layout-2">
          <el-button type="text" icon="el-icon-plus" @click="addRowData.show = true"
                     v-if="buttonAuthority.role && buttonAuthority.role.create">新建
          </el-button>
        </div>
      </div>
      <div class="m-dataList">
        <el-table
          :data="dataList"
          style="width: 100%"
          v-loading="dataListLoading"
          element-loading-text="loading..."
          max-height="500"
        >
          <el-table-column
            prop="name"
            label="角色名称"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间">
          </el-table-column>
          <el-table-column
            prop="updateUser"
            label="更新人"
            width="120">
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间">
          </el-table-column>
          <el-table-column
            prop="moreOperations"
            label="更多操作"
            v-if="buttonAuthority.role && (buttonAuthority.role.user_field_perm || buttonAuthority.role.perm || buttonAuthority.role.delete)"
            fixed="right"
            align="center"
            width="120">
            <template slot-scope="scope">
              <el-dropdown trigger="click" @command="type => handleOperation(type, scope.row)">
                <el-button
                  type="text"
                  icon="el-icon-arrow-down"
                  size="small">
                  更多操作
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="GrantPermissions" v-if="buttonAuthority.role && buttonAuthority.role.perm">
                    分配权限
                  </el-dropdown-item>
                  <el-dropdown-item command="AssignFields"
                                    v-if="buttonAuthority.role && buttonAuthority.role.user_field_perm">分配存取栏位
                  </el-dropdown-item>
                  <el-dropdown-item command="delete"
                                    v-if="buttonAuthority.role && buttonAuthority.role.delete">删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="新建角色"
      :visible.sync="addRowData.show"
      :close-on-click-modal="false" :close-on-press-escape="false"
      class="m-dialog"
      @close="clearForm"
      width="420px">
      <el-form :model="addRowData.form" :rules="addRowData.rules" :inline="true" ref="refAddrowData">
        <el-form-item label="" prop="roleName">
          <el-input v-model="addRowData.form.roleName" placeholder="角色名称由字母，数字，下划线"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addRowData.show = false">取 消</el-button>
          <el-button type="primary" @click="fnAddrowData" :loading="addLoading">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import * as Utils from "@/utils";
  import * as roleAPI from "@/Api/role";
  export default {
    name: "Role",
    data() {
      return {
        searchForm: {
          roleName: ""
        },
        addRowData: {
          show: false,
          form:{
            roleName:''
          },
          rules:{
            roleName:[
              {required: true, message: "角色名不能为空", trigger: "blur"},
              {pattern: /^[a-zA-Z0-9\_]+$/, trigger: "blur", message: "输入的角色名称不合法",}
            ]
          }
        },
        dataList: [],
        dataListLoading:false,
        addLoading:false,
      };
    },
    computed: {
      ...mapGetters([
        'buttonAuthority',
      ]),
    },
    methods: {
      queryData() {
          this.dataListLoading = true;
        roleAPI.roleQuery(this.searchForm)
          .then(res => {
            this.dataListLoading = false;
            if (res.code != '0') {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.dataList = res.data;
          })
          .catch(error => {
            this.dataListLoading = false;
            console.log(error);
          });
      },
      clearForm() {
          this.$refs.refAddrowData.resetFields();
      },
      resetForm(form) {
        Utils.resetSearchFrom(form);
      },
      fnAddrowData() {
        this.$refs.refAddrowData.validate(flg=>{
            if(!flg) {
                return;
            }
            this.addLoading = true;
          roleAPI.roleCreate(this.addRowData.form)
            .then(res => {
              this.addLoading = false;
              if (res.code != '0') {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.addRowData.show = false;
              this.$message.success("角色创建成功！");
              this.queryData();
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error)
            });
        })
      },
      onRoleDelete(row) {
        this.$confirm("确认删除该条数据?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(_ => {
            roleAPI
              .roleDelete({
                roleId: row.id,
                roleName: row.name
              })
              .then(res => {
                if (res.code != 0) {
                  this.$notify({
                    title: "温馨提示",
                    message: res.msg,
                    type: "warning"
                  });
                  return;
                }
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.queryData();
              });
          })
          .catch(() => {
          });
      },
      handleOperation(type, row) {
        if (type == 'delete') {
          this.onRoleDelete(row);
          return;
        }
        this.$router.push({name: type, query: {name: row.name}});
      },
      reset() {
        this.searchForm.roleName = "";
      }
    },
    created() {
      this.queryData();
    },
  };
</script>

<style scoped lang="scss">

</style>

